﻿@{
    Layout = null;
    var tableName = PageViewModel.PageTableID(this);
    var tableToolBar = PageViewModel.PageTableToolbar(this);
    var tableToolBarSearch = PageViewModel.PageTableToolbarSearch(this);
    var tableToolBarReset = PageViewModel.PageTableToolbarReset(this);

    var editFunName = PageViewModel.PageFunctionName(this, "edit_role");
    var editDlgName = PageViewModel.PageEditDialog(this);
    var saveEditFunName = PageViewModel.PageFunctionName(this, "save_edit");
    var deleteFunName = PageViewModel.PageFunctionName(this, "delete");

    // 权限配置
    var editPrivaligeDlg = PageViewModel.ControlID(this, "edit_privalige_dlg");
    var editPrivaligeFunName = PageViewModel.PageFunctionName(this, "edit_privalige_fun");

    // 成员管理
    var roleUsersDlg = PageViewModel.PageFunctionName(this, "role_users_dlg");
    var roleUsersFunName = PageViewModel.PageFunctionName(this, "role_users_dlg_fun");
}

<div style="height:100%;">
    <script type="text/javascript">
        function @editFunName (id) {
            var dlg = $dlg('@editDlgName');
            dlg.dialog({
                title: '角色', width: 600, height: 300,
                closed: false, cache: false, modal: true, maximizable: false, resizable: true, maximized: false,
                href: '~/Systems/_EditRole?ID=' + id,
                onResize: function () {
                    $(this).dialog('center');
                },
                buttons: [
                    {
                        text: "保 存",
                        handler: function () { @saveEditFunName (); },
                        iconCls: "icon-save"
                    }, {
                        text: "取 消",
                        handler: function () {
                            $("#@editDlgName").dialog("close");
                        },
                        iconCls: "icon-cancel"
                    }
                ],
                onLoad: function () {
                    LoadObject(id, "~/Systems/GetRoleByID/", function (role) {
                            var form = $("#@editDlgName").find("form");
                            form.form("load", role);
                            if (role.Enable) {
                                form.find("#Enable").switchbutton("check");
                            } else {
                                form.find("#Enable").switchbutton("uncheck");
                            }
                        });
                }
            });
        }

        function @saveEditFunName () {
            var form = $("#@editDlgName").find("form");
            if (form.form('enableValidation').form('validate')) {
                var role = form.form_to_json(function (form, role) {
                    role.Enable = form.find("#Enable").switchbutton("options").checked;
                });

                $.ajax({
                    url: "~/Systems/SaveRole",
                    type: "POST",
                    data: role,
                    success: function (e) {
                        if (e.Result) {
                            $.messager.alert('保存成功', '保存成功!', 'info', function () {
                                $('#@editDlgName').dialog('close');
                                $('#@tableName').datagrid('reload');
                            });
                        } else {
                            $.messager.alert('保存失败', '保存失败: ' + e.Msg, 'error');
                        }
                    },
                    error: function (e) {
                        ShowAjaxError(e);
                    }
                });
            }
        }

        function @deleteFunName (id) {
            if (id > 0 && confirm("确认删除角色信息?")) {
                $.ajax({
                    async: false,
                    method: "DELETE",
                    url: $.Content("~/Systems/DeleteRole/" + id),
                    context: $("#@tableName"),
                    success: function (e) {
                        if (e.Result) {
                            this.datagrid('reload');
                        } else {
                            $.messager.alert('删除数据', '删除失败: ' + e.Msg, 'error');
                        }
                    },
                    error: function (e1, e2, e3) {
                        ShowAjaxError(e1, "删除数据");
                        this.datagrid('reload');
                    }
                });
            }
        }
    </script>

    <script type="text/javascript">
        function @editPrivaligeFunName (id) {
            var dlg = $dlg('@editPrivaligeDlg');
            dlg.dialog({
                title: '配置权限', width: 800, height: 500,
                closed: false, cache: false, modal: true, maximizable: true, resizable: true, maximized: false,
                href: '~/Systems/_EditPrivalige?ID='+id,
                onResize: function () {
                    $(this).dialog('center');
                }
            });
        }
    </script>

    <script type="text/javascript">
        function @roleUsersFunName (id) {
            var dlg = $dlg('@roleUsersDlg');
            dlg.dialog({
                title: '角色成员', width: 850, height: 550,
                closed: false, cache: false, modal: true, maximizable: false, resizable: true,
                href: '~/Systems/_EditRoleUsers?ID=' + id,
                onResize: function () {
                    $(this).dialog('center');
                }
            });
        }
    </script>

    <script type="text/javascript">
    function @tableToolBarSearch {
        $('#@tableName').datagrid('load', {
            Name: $("#@tableToolBar").find("#Name").textbox("getValue"),
        });
    }

    function @tableToolBarReset {
        $("#@tableToolBar").find("#Name").textbox("setValue", "");
        @tableToolBarSearch;
    }
    </script>

    <table id="@tableName" class="easyui-datagrid" style="width:100%;" rownumbers="true" fit="true" fitcolumns="true"
           pagination="true" pageSize="@SystemSettingService.Instance.PageSize" pageList="@SystemSettingService.Instance.PageList"
           data-options="striped:true,border:false,singleSelect:true,url: '~/Systems/GetRoles',method:'get',toolbar:'#@tableToolBar'">
        <thead>
            <tr>
                <th data-options="field:'_edit',align:'center',formatter:function(v,r,i){
                                if(!r.IsInternal) {
                                    return GridRowEditFmt('@editFunName', r.Id);
                                }
                            }" width="45"></th>
                <th data-options="field:'_remove',align:'center',formatter:function(v,r,i){
                                if(!r.IsInternal) {
                                    return GridRowDeleteFmt('@deleteFunName', r.Id);
                                }
                            }" width="45"></th>

                <th data-options="field:'Name'" width="140">角色名称</th>
                <th data-options="field:'Enable',align:'center',formatter:$.CheckdFormat" width="80">启用</th>
                <th data-options="field:'Description'" width="180">备注说明</th>
                <th data-options="field:'_Privalige',align:'center',formatter:function(v,r,i){
                                if(!r.IsInternal) {
                                    return GridRowOperationFmt('@editPrivaligeFunName', r.Id, '权限配置', 'fa fa-copyright');
                                }
                            }" width="120">权限配置</th>
                <th data-options="field:'_Members',align:'center',formatter:function(v,r,i){
                                    return GridRowOperationFmt('@roleUsersFunName', r.Id, '成员管理', 'fa fa-users', '#87b87f');
                            }" width="120">成员管理</th>
                <th data-options="field:'ChangedTime',width:160,align:'center',formatter:$.DateTimeFmt">最后修改</th>
                <th data-options="field:'CreatedTime',width:160,align:'center',formatter:$.DateTimeFmt">创建时间</th>
            </tr>
        </thead>
    </table>
    <div id="@tableToolBar" class="easyui-panel table-toolbar">
        <a href="javascript:@editFunName ()" class="easyui-linkbutton t-btn"><i class="fa fa-plus-circle" style="color:green"></i><span>新增</span></a>
        <ul class="query-body">
            <li>
                <span>角色名称：</span>
                <input id="Name" class="easyui-textbox" data-options="prompt:'角色名称'" />
            </li>
            <li>
                <a href="javascript:@tableToolBarSearch ()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
                <a href="javascript:@tableToolBarReset ()" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">重置</a>
            </li>
        </ul>
    </div>

</div>